<template>
	<view class="content">
		<view class="navb"></view>
		<!-- 头部的导航 -->
		<navBar></navBar>
		<!-- 搜素 -->
		<view class="search">
			<view class="address">
				<image src="/static/cytool/地址管理.png" mode=""></image>
				<text>保定</text>
			</view>
			<u-search class="usearch" @click="goSearch" :disabled="true" placeholder="请输入您要搜索的服务" :show-action="false"
				input-align="center"></u-search>
		</view>
		<!-- 滚动通知 -->
		<view v-show="tzFlag" style="margin-top: 2px;">
			<u-notice-bar :text="text1" mode="closable"></u-notice-bar>
		</view>
		<!-- 轮播图 -->
		<view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
				indicator-color="#acb9b5" indicator-active-color="rgba(255, 242, 245, 1.0)">
				<swiper-item v-for="(item,index) in list" :key="index">
					<navigator class="swiper-item" :url="'/subpkg/good-detail/good-detail?goods_id='+item.goods_id">
						<image class="swimage" :src="item.image"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分割线 -->
		<!-- <u-divider class="fg" text="服务分类" textColor="#74dec9" lineColor="#000000" ></u-divider> -->

		<!-- 分类  -->
		<view class="fl">
			<swiper class="swiper" circular="true" :indicator-dots="true" :autoplay="false" :duration="duration"
				indicator-active-color="rgba(86, 215, 190,1)" @change="swchange">
				<swiper-item class="flitem1">
					<view v-for="(item,index) in  fllistA" :key="item.id" @click="topageFl(item)">
						<!--  {{item.flname}} -->
						<flPageVue :flPageLName="item.flName" :flPageLImg="item.flImage| avatarfilter"></flPageVue>
						<!-- <flPageVue :flPageLName="item.flName"
							:flPageLImg="item.flImage ? (item.flImage | avatarfilter) : item.flImage"></flPageVue> -->
						<view v-for="(item1,index1) in  item.children" :key="item1.id"
							@click.stop="topageFl2(item1,$event)">
							<flPageVue :flPageLName="item1.flName" :flPageLImg="item1.flImage| avatarfilter">
							</flPageVue>
							<!-- <flPageVue :flPageLName="item1.flName"
								:flPageLImg="item1.flImage ? (item1.flImage | avatarfilter) : item1.flImage">
							</flPageVue> -->
						</view>

					</view>


				</swiper-item>
				<swiper-item class="flitem2">

					<view v-for="(item,index) in  fllistB" :key="item.id" @click="topageFl(item)">
						<!--  {{item.flname}} -->
						<flPageVue :flPageLName="item.flName" :flPageLImg="item.flImage| avatarfilter"></flPageVue>
						<!-- <flPageVue :flPageLName="item.flName"
							:flPageLImg="item.flImage ? (item.flImage | avatarfilter) : item.flImage"></flPageVue> -->
						<view v-for="(item1,index1) in  item.children" :key="item1.id"
							@click.stop="topageFl2(item1,$event)">
							<flPageVue :flPageLName="item1.flName" :flPageLImg="item1.flImage| avatarfilter">
							</flPageVue>
							<!-- <flPageVue :flPageLName="item1.flName"
								:flPageLImg="item1.flImage ? (item1.flImage | avatarfilter) : item1.flImage">
							</flPageVue> -->
						</view>

					</view>
					<!-- <flPageVue flPageList="你好"></flPageVue> -->
				</swiper-item>

			</swiper>
		</view>
		<!--  热卖服务-->
		<view class="rmfw">
			<rImmediatelyVue ref="jkd"></rImmediatelyVue>
		</view>
		<!--瀑布数据  -->
		<view style="padding:0 5px; margin-top: 5px;">
			<!-- 瀑布流数据 -->
			<waterFallVue v-if="waterList.length > 0" :waterList="waterList"></waterFallVue>
		</view>
		<uni-load-more :status="status"></uni-load-more>

		<!-- 目的：将下面的空白部分腾出来 -->
		<view class="empty0"></view>
		<!-- 底部的tabbar -->
		<tabbarVue></tabbarVue>
	</view>
</template>

<script>
	import tabbarVue from '@/common/custom-tab-bar/custom-tab-bar.vue';
	import navBar from '@/common/navbar/navbar.vue'
	import flPageVue from '@/view/flPage/flPage.vue';
	import rImmediatelyVue from '@/view/rImmediately/rImmediately.vue';
	import waterFallVue from '@/view/waterFall/waterFall.vue';
	import {
		base_Url
	} from '../../utils/Url';
	export default {
		components: {
			tabbarVue,
			navBar,
			flPageVue,
			rImmediatelyVue,
			waterFallVue
		},
		data() {
			return {
				status: "more", //加载动画的状态
				tzFlag: true, //通知
				list: [{
						image: base_Url + "/upload/images/switch1.jpg"
					},
					{
						image: `${base_Url}/upload/images/switch2.jpg`
					},
					{
						image: base_Url + "/upload/images/switch3.jpg"
					},
				],

				text1: '注意选择好所需的服务',

				fllistA: [
					// {
					// 	flName: "保洁清洗",
					// 	flImage: "/static/flimage/jiadianqingxi.png",
					// 	children: [{
					// 			flName: "家政保洁",
					// 			flImage: "/static/flimage/jiatingbaojie.png"
					// 		}, {
					// 			flName: "擦玻璃",
					// 			flImage: "/static/flimage/ziyuan.png"
					// 		},
					// 		{

					// 			flName: "深度清洁",
					// 			flImage: "/static/flimage/jiazhengbaojie.png"
					// 		}
					// 	]
					// },
					// {
					// 	flName: "家电清洗",
					// 	flImage: "/static/flimage/喷头-copy.png",
					// 	children: [{
					// 		flName: "油烟机清洗",
					// 		flImage: "/static/flimage/chouyanji.png"
					// 	}, {
					// 		flName: "冰箱清洗",
					// 		flImage: "/static/flimage/bingxiangweixiu.png"
					// 	}, {
					// 		flName: "衣鞋任洗",
					// 		flImage: "/static/flimage/kuaisuxi.png"
					// 	}, ]
					// },
					// {
					// 	flName: "保姆月嫂",
					// 	flImage: "/static/flimage/naiping.png",
					// 	children: [{
					// 		flName: "钟点工",
					// 		flImage: "/static/flimage/shizhongtianchong.png"
					// 	}, {
					// 		flName: "看护小孩",
					// 		flImage: "/static/flimage/kanhuxiaohai.png"
					// 	}, {
					// 		flName: "住家保姆",
					// 		flImage: "/static/flimage/baomuyuesao.png"
					// 	}, ]
					// },
					// {
					// 	flName: "放心搬家",
					// 	flImage: "/static/flimage/wodesonghuodanxinxi.png",
					// 	children: [{
					// 		flName: "厢货搬家",
					// 		flImage: "/static/flimage/wuliujiedian.png"
					// 	}, {
					// 		flName: "二手家电",
					// 		flImage: "/static/flimage/ershou-jiadian.png"
					// 	}, {
					// 		flName: "家电回收",
					// 		flImage: "/static/flimage/hs.png"
					// 	}, ]
					// },
					// {
					// 	flname: "家电维修",
					// 	flimage: "/static/flimage/jiadianweixiu.png",
					// 	liteitem: [{
					// 		itemName: "空调维修",
					// 		itemImage: "/static/flimage/jiadianqingxicolor.png"
					// 	}, {
					// 		itemName: "油烟机维修",
					// 		itemImage: "/static/flimage/ice-lampblack-machine.png"
					// 	}, {
					// 		itemName: "微波炉维修",
					// 		itemImage: "/static/flimage/bank-safe-50.png"
					// 	}, 
					// 	]
					// },
				],
				fllistB: [
					// {
					// 	flName: "修厨房家电",
					// 	flImage: "/static/flimage/chufang.png",
					// 	children: [{
					// 		flName: "水池疏通",
					// 		flImage: "/static/flimage/mianxingxishouchi.png"
					// 	}, {
					// 		flName: "洗衣机维修",
					// 		flImage: "/static/flimage/zu532.png"
					// 	}, {
					// 		flName: "门窗维修",
					// 		flImage: "/static/flimage/shangmenanzhuang.png"
					// 	}, ]
					// },
					// {
					// 	flName: "电视维修",
					// 	flImage: "/static/flimage/jiadianweixiu6.png",
					// 	children: [{
					// 		flName: "冰箱维修",
					// 		flImage: "/static/flimage/bingxiangqingxi.png"
					// 	}, {
					// 		flName: "燃气灶维修",
					// 		flImage: "/static/flimage/ranqizao.png"
					// 	}, {
					// 		flName: "空调移机",
					// 		flImage: "/static/flimage/a-kongtiaowaijijiadian.png"
					// 	}, ]
					// },
					// {
					// 	flName: "新居开荒",
					// 	flImage: "/static/flimage/xinjukaihuang.png",
					// 	children: [{
					// 		flName: "全无大扫除",
					// 		flImage: "/static/flimage/a-zu494.png"
					// 	}, {
					// 		flName: "养宠保洁",
					// 		flImage: "/static/flimage/dog.png"
					// 	}, {
					// 		flName: "厨卫保洁",
					// 		flImage: "/static/flimage/bowl-fill.png"
					// 	}, ]
					// },
					// {
					// 	flName: "房屋维修",
					// 	flImage: "/static/flimage/weibaodanwei.png",
					// 	children: [{
					// 		flName: "垃圾倾倒",
					// 		flImage: "/static/flimage/垃圾倾倒.png"
					// 	}, {
					// 		flName: "马桶安装",
					// 		flImage: "/static/flimage/weixiu.png"
					// 	}, {
					// 		flName: "灯具拆装",
					// 		flImage: "/static/flimage/dengjuweixiu.png"
					// 	}, ]
					// },
					// {
					// 	flname: "数码维修",
					// 	flimage: "/static/flimage/数码维修.png",
					// 	liteitem: [{
					// 		itemName: "手机维修",
					// 		itemImage: "/static/flimage/shumaweixiu1.png"
					// 	}, {
					// 		itemName: "打印机维修",
					// 		itemImage: "/static/flimage/dayinji.png"
					// 	}, {
					// 		itemName: "电脑维修",
					// 		itemImage: "/static/flimage/diannaoweixiu.png"
					// 	}, ]
					// }

				],
				waterpageNo: 1,
				waterpageSize: 4,
				watertotal: 0,
				waterList: []

			}
		},
		onLoad() {
			// this.$http.post('/carouseimage/getimage').then(res => {
			// 	console.log('lunbotu', res);
			// })
			this.getwaterFall()
		},

		mounted() {
			this.getfl({
				pageNo: 1,
				pageSize: 4,
			})
			this.$refs.jkd.getjkd()
			// this.getwaterFall()
		},
		onPullDownRefresh() {
			console.log("下拉刷新触发");
			this.watertotal = 0
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},

		onReachBottom() {
			console.log("上拉触底触发");
			// this.status = "loading"
			// if (10 < 2) {


			// 	this.status = "loading"
			// } else {
			// 	this.status = "noMore"
			// }
			if (this.waterpageNo * this.waterpageSize >= this.watertotal) {

				this.status = "noMore"
				return;
			} else {
				this.status = "loading"
			}
			if (this.loading) return

			this.waterpageNo += 1
			console.log('我到地步了', this.waterpageNo)
			this.getwaterFall()
		},
		onShow() {
			this.$store.commit("changeTabbarIndex", 0)
		},
		filters: {
			avatarfilter(e) {
				// console.log('数据', e);
				const originalUrl = JSON.parse(e).url
				const updatedUrl = originalUrl.replace(/^http:\/\/127\.0\.0\.1:8080/, base_Url);
				// console.log("adada", updatedUrl);
				return updatedUrl
				// return e
			}
		},
		computed: {
			// filteredImage(e) {
			// 	return e ? this.avatarfilter(e) : e;
			// }
		},
		methods: {
			getwaterFall() {
				// this.$http.post("/serviceClassification/page", {
				this.$http.post("/servicedetails/page", {
					pageNo: this.waterpageNo,
					pageSize: this.waterpageSize,
					params: {
						serviceName: "",
						specification: [],
					}
				}).then(res => {
					console.log("瀑布信息", res);
					this.watertotal = res.result.total
					this.waterList = [...this.waterList, ...res.result.records]
					console.log("信息232", this.waterList);
				})
			},
			// avatarfilter(e) {
			// 	// console.log('数据', e);
			// 	const originalUrl = JSON.parse(e).url
			// 	const updatedUrl = originalUrl.replace(/^http:\/\/127\.0\.0\.1:8080/, base_Url);
			// 	// console.log("adada", updatedUrl);
			// 	return updatedUrl
			// 	// return e
			// },

			swchange(e) {

				// console.log('qqq', e.detail.current);

				const data = {
					pageNo: e.detail.current + 1,
					pageSize: 4,
				}
				this.getfl(data)

			},
			getfl(e) {
				this.$http.post('/serviceClassification/paginmdQuery', e).then(res => {
					// console.log('res', res);
					if (e.pageNo == 1) {
						this.fllistA = res.result.records


						// this.fllistA = res.result.records.map(item => {
						// 	// console.log('sss', JSON.parse(item.flImage).url.replace(
						// 	// 	/^http:\/\/127\.0\.0\.1:8080/, base_Url));
						// 	this.$children = item.children.map(res => {

						// 		return {
						// 			...res,
						// 			flImage: JSON.parse(res.flImage).url.replace(
						// 				/^http:\/\/127\.0\.0\.1:8080/, base_Url)
						// 		}
						// 	})
						// 	if (item.flImage) {
						// 		return {
						// 			...item,
						// 			flImage: JSON.parse(item.flImage).url.replace(
						// 				/^http:\/\/127\.0\.0\.1:8080/, base_Url),
						// 			children: this.$children
						// 		}
						// 	} else {
						// 		return {
						// 			...item
						// 		}
						// 	}
						// })

					} else {
						this.fllistB = res.result.records
						// this.fllistB = res.result.records.map(item => {
						// 	console.log('sssaaa',
						// 		item);
						// 	this.$children = item.children.map(res => {

						// 		return {
						// 			...res,
						// 			flImage: JSON.parse(res.flImage).url.replace(
						// 				/^http:\/\/127\.0\.0\.1:8080/, base_Url)
						// 		}
						// 	})
						// 	if (item.flImage) {
						// 		return {
						// 			...item,
						// 			flImage: JSON.parse(item.flImage).url.replace(
						// 				/^http:\/\/127\.0\.0\.1:8080/, base_Url),
						// 			// children: this.$children
						// 		}
						// 	} else {
						// 		return {
						// 			...item,
						// 		}
						// 	}
						// })
					}

				})
			},
			topageFl(a) {
				console.log("1", a);
			},
			topageFl2(a, event) {
				console.log('2', a);
				// console.log(event);
				this.$toPage("/otherPage/personnelList/personnelList", "id", a.id)
				event.stopPropagation()
			},

			goSearch() {
				// console.log("你好");
				uni.navigateTo({
					url: "/view/searchService/searchService"

				})
			},
			topageitem(e) {
				console.log("随机" + e);
			}

		}
	}
</script>

<style lang="less">
	.empty0 {
		height: 48px;

	}

	.content {
		background-color: #e7e7e7;

		margin-top: 26px;

		.navb {
			padding-top: 4px;
		}

		// 搜索框
		.search {
			// background-color: red;
			margin-top: 7px;
			// width: 314px;
			// margin-left: 30px;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.address {
				margin-left: 4px;
				margin-right: 6px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #909d9d;

				text {
					font-size: 12px;
					font-family: serif;

				}

				image {
					width: 13px;
					height: 13px;

				}

			}

			.usearch {}

		}

		// 轮播图
		.swiper-item {
			margin-left: 3px;


			// 轮播图图片
			.swimage {

				padding: 8px;
				width: 95%;
				height: 240px;

			}
		}


		// 分类
		.fl {
			background-color: #ffffff;
			border-radius: 5px;
			margin: 5px;
			padding: 4px;

			.swiper {
				height: 210px;

				.flitem1 {
					height: 225px;
					display: flex;
					justify-content: space-around;
					margin-top: 2px;
					padding: 2px;
				}

				.flitem2 {
					display: flex;
					justify-content: space-around;
					padding: 2px;
				}
			}

		}

		// 热卖服务
		.rmfw {
			border-radius: 5px;
			background-color: #ffffff;
			margin: 5px;

		}



	}
</style>